<template>
  <div id="box">
    <ul class="msg-title">
      <li v-for="(item,index) in titleList" :class="{active:curTab===index}" @click="setWarnTab(index)">
        {{item}}
      </li>
    </ul>
    <div class="msg-content">
      <EasyScrollbar :barOption="listBar">

        <div class="no-data" v-if="!isBoxShow(warnDataList[curTab])">暂无信息</div>

        <ul class="real-warn-list" v-if="isBoxShow(warnDataList[curTab])">
          <li class="real-warn-li" v-for="(warn,index) in warnDataList[curTab]" v-if="warn.length > 0">
            <p class="warn-list-title">
              <span>{{warn[0]?warn[0].WarnName:''}}</span><span> 次数 : {{warn.length}}次 </span>
              <!--<span v-if="curTab!==2"> 总时长 : {{timeCount(warn)}}</span>-->
            </p>
            <ul class="real-warn-cont">
              <li class="cont-item" v-for="(item,num) in warn">
                <span class="cont-title" v-if="item.WarnName">{{item.WarnName}}
                  <span v-if="warn.length>1">{{num + 1}}</span>
                </span>
                <p v-if="item.Speed">
                  <span class="item">速度 : </span><span class="value">{{item.Speed}}</span>
                </p>
                <p v-if="item.Time">
                  <span class="item">时间 : </span><span class="value">{{item.Time | dateFilter}}</span>
                </p>
                <p v-if="item.Place">
                  <span class="item">位置 : </span><span class="value">{{item.Place}}</span>
                </p>
                <!--<p v-if="item.detail">-->
                  <!--<span class="item">详情 : </span><span class="value">{{item.detail}}</span>-->
                <!--</p>-->
                <!--<p v-if="item.timeLine">-->
                <!--<span class="item">时长 : </span><span class="value">{{item.timeLine}}</span>-->
                <!--</p>-->
              </li>
            </ul>
          </li>
        </ul>
      </EasyScrollbar>
    </div>
  </div>
</template>

<script>
  import eventBus from '../../../util/event-bus';
    import DateTimeHelper from '../../../util/datetime-helper';
  export default {
    name: 'SingleHistoryWarn',
    data () {
      return {
        titleList: ['报警事件', '违规信息', '驾驶事件'],
        curTab: 1,
        listBar: {
          barColor: "#26a2d6",   //滚动条颜色
          barWidth: 4,           //滚动条宽度
          railColor: "#405569",     //导轨颜色
          barMarginRight: 2,     //垂直滚动条距离整个容器右侧距离单位（px）
          barMaginBottom: 0,     //水平滚动条距离底部距离单位（px)
          barOpacityMin: 0.4,      //滚动条非激活状态下的透明度
          zIndex: "auto",        //滚动条z-Index
          autohidemode: true,     //自动隐藏模式
          horizrailenabled: false,//是否显示水平滚动条
        },
      }
    },
    mounted(){

    },
    filters:{   //过滤器
      dateFilter(value) {
        return DateTimeHelper.returnStandardDate(value);
      }
    },
    props: {
      warnDataObj: {
        type: Object,
        required: true
      }
    },
    computed: {
      warnDataList: function () {
        let dataList = [];

        Object.keys(this.warnDataObj).map((key) => {
          dataList.push(Object.values(this.warnDataObj[key]))
        });
        console.log(dataList)
        return dataList;
      }
    },
    components: {},
    methods: {
      setWarnTab(index){
        this.curTab = index;
//        eventBus.$emit("setWarnTab",index);
      },
      timeCount(warn){
        let timeCount = 0;
        if (warn.length > 1) {
          warn.map((item) => {
            timeCount = timeCount + parseInt(item.timeLine);
          })
        } else {
          timeCount = warn[0] ? warn[0].timeLine:''
        }
        return DateTimeHelper.formatTimeLine(timeCount);
      },
      isBoxShow(list) {
        let warnList =[];
        if(list){
          list.map((item) => {
            warnList.push(...item);
          });
        }
        return warnList.length>0 ? true :false;
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../../static/common/common";

  #box {
    position: absolute;
    left: 0px;
    top: 100px;
    z-index: 200;
    width: 380px;
    min-height: 540px;
    @include borderBlur;
    pointer-events: auto;
    .msg-title {
      color: $font-color-normal;
      list-style: none;
      display: flex;
      padding-left: 0;
      margin: 0;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid $color-border;
      li {
        flex-grow: 1;
        border-right: 1px solid $color-border;
        font-size: $font-normal;
        cursor: pointer;
        &:last-child {
          border-right: none;
        }
        &.active {
          background-color: $color-active;
        }
      }
    }
    .msg-content {
      margin: 10px 0;
      .no-data{
        padding: 20px 0;
        line-height: 40px;
      }
      .real-warn-list {
        list-style: none;
        text-align: left;
        padding-left: 0;
        margin: 0;
        color: $color-warn;
        font-size: $font-normal;
        height: 480px;
        .real-warn-li {
          &:not(:first-child) {
            border-top: 1px solid $color-border;
          }
        }
        .warn-list-title {
          span {
            font-size: $font-normal;
          }
          line-height: 20px;
          margin: 5px 10px;
        }
        .real-warn-cont {
          padding: 0 10px 10px;
          list-style: none;
          .cont-item {
            margin: 8px 0;
            .cont-title {
              line-height: 26px;
              color: $font-color-normal;
            }
            p {
              line-height: 25px;
              color: $font-color-normal;
            }
          }
        }
      }
    }
  }
</style>
